<template>
  <div class="main" ref="mainContainer">
    <div class="header" ref="headerContainer">
      <div class="header-actions">
        <el-button type="primary" @click="movefileBatch">清空回收站</el-button>
        <el-button type="primary" @click="recoveryfileBatch"
          >批量恢复
        </el-button>
        <div class="tips">
          <div>
            提示：回收站不占用网盘空间，文件保存 10天 后将被自动清除。
            <a href="#">开通超级会员</a> 延长至35天
          </div>
        </div>
      </div>
    </div>

    <div class="file-list">
      <MyTable
        ref="tableRef"
        :dataSource="tableData"
        :columns="columns"
        :fetch="loadDataList"
        :initFetch="true"
        :options="tableOptions"
        @rowSelected="rowSelected"
        @rowdbselected="rowdbselected"
      >
        <template #fileName="{ index, row }">
          <div
            class="fileName"
            @mouseenter="showOp(row)"
            @mouseleave="cancelOp(row)"
          >
            <template
              v-if="
                (row.fileType === 1 || row.fileType === 3) && row.status == 2
              "
            >
              <icon :cover="row.fileCover" :width="32"></icon>
            </template>
            <template v-else>
              <icon
                v-if="row.folderType == 0"
                :width="32"
                :fileType="row.fileType"
              ></icon>
              <icon v-if="row.folderType == 1" :width="32" :fileType="0"></icon>
            </template>
            <span class="file-name" :title="row.fileName" v-if="!row.showEidt">
              <span style="cursor: pointer" :title="row.fileName">{{
                row.fileName
              }}</span>
              <span v-if="row.status == 0">转码中</span>
              <span v-if="row.status == 1">转码失败</span>
            </span>
            <div
              v-if="
                row.showOp && row.fileId && row.status == 2 && !row.showEidt
              "
              class="fileedits"
            >
              <span @click="delfile(row)"
                ><el-icon><Delete /></el-icon>删除</span
              >

              <span @click="recoveryfile(row)"
                ><el-icon><Rank /></el-icon>还原</span
              >
            </div>
          </div>
        </template>
        <template #fileSize="{ row }">
          <div v-if="row.fileSize">{{ proxy.bit(row.fileSize) }}</div>
        </template>
      </MyTable>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  getCurrentInstance,
  nextTick,
  onMounted,
  onUnmounted,
  h,
} from "vue";
const { proxy } = getCurrentInstance();
const api = {
  delFile: "/recycle/delFile",
  recoverFile: "/recycle/recoverFile",
  loadRecycleList: "/recycle/loadRecycleList",
};
const tableRef = ref();
const tableData = ref({});
const columns = [
  {
    label: "文件名",
    prop: "fileName",
    scopedSlots: "fileName",
    align: "left",
  },
  {
    label: "文件大小",
    prop: "fileSize",
    width: 100,
    scopedSlots: "fileSize",
  },
  {
    label: "最后修改时间",
    prop: "lastUpdateTime",
    width: 200,
  },
  {
    label: "删除时间",
    prop: "recoveryTime",
    width: 200,
  },
];
const tableOptions = ref({
  extHight: 50,
  selectType: "checkbox",
  showPagination: true,
});

const loadDataList = async (pageNo, pageSize) => {
  let params = {
    pageNo: tableData.value.pageNo || pageNo || 1,
    pageSize: tableData.value.pageSize || pageSize || 10,
  };
  let res = await proxy.request({
    url: api.loadRecycleList,
    params,
  });
  if (!res) {
    return;
  }
  tableData.value = res.data;
};

const selectListfiles = ref([]);
// 选择行
const rowSelected = (selectiondata) => {
  selectListfiles.value = selectiondata.map((item) => item.fileId);
};
//双击行
const rowdbselected = async (row) => {
  currentFolder.value.fileId = row.fileId;
};
//单个恢复
const recoveryfile = async (row) => {
  proxy.confirm(
    h("div", { style: "display: flex" }, [
      h("div", null, [
        "确定要恢复",
        h("span", { style: "color: teal;margin:0 .5rem;" }, `${row.fileName}`),
        "吗?",
      ]),
    ]),
    async () => {
      let result = await proxy.request({
        url: api.recoverFile,
        params: {
          fileIds: row.fileId,
        },
      });
      if (!result) {
        return;
      }
      loadDataList();

      proxy.Mymessage.success("恢复成功");
    }
  );
};
//批量恢复
const recoveryfileBatch = async () => {
  if (selectListfiles.value.length == 0) {
    proxy.Mymessage.error("请选择文件");
    return;
  }
  proxy.confirm(
    h("div", { style: "display: flex" }, [
      h("div", null, ["确定要全部恢复吗?"]),
    ]),
    async () => {
      let result = await proxy.request({
        url: api.recoverFile,
        params: {
          fileIds: selectListfiles.value.join(","),
        },
      });
      if (!result) {
        return;
      }
      loadDataList();

      proxy.Mymessage.success("恢复成功");
    }
  );
};
//单个删除
const delfile = async (row) => {
  proxy.confirm(
    h("div", { style: "display: flex" }, [
      h("div", null, [
        "确定要删除",
        h("span", { style: "color: teal;margin:0 .5rem;" }, `${row.fileName}`),
        "吗?",
      ]),
    ]),
    async () => {
      let result = await proxy.request({
        url: api.delFile,
        params: {
          fileIds: row.fileId,
        },
      });
      if (!result) {
        return;
      }
      loadDataList();

      proxy.Mymessage.success("删除成功");
    }
  );
};
//清空回收站
const movefileBatch = async () => {
  if (selectListfiles.value.length == 0) {
    proxy.Mymessage.error("请选择文件");
    return;
  }
  proxy.confirm("确定永久删除吗？", async () => {
    let result = await proxy.request({
      url: api.delFile,
      params: {
        fileIds: selectListfiles.value.join(","),
      },
    });
    if (!result) {
      return;
    }
    proxy.Mymessage.success("删除成功");
    loadDataList();
  });
};

const currentFolder = ref({ fileId: 0 });

//显示操作按钮
const showOp = (row) => {
  tableData.value.list.forEach((item) => {
    item.showOp = false;
  });
  row.showOp = true;
};
const cancelOp = (row) => {
  row.showOp = false;
};

defineExpose({});
</script>

<style scoped lang="scss">
.table-header {
  margin-bottom: 20px;
  padding: 0 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.file-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.file-list {
  height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  .fileName {
    text-align: center;
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: flex-start;
  }
}
.fileedits {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-wrap: nowrap;
  span {
    user-select: none;
    text-align: center;
    display: flex;
    align-items: center;
    overflow-x: auto;
    margin-right: 10px;
    white-space: nowrap;
    transition: color 0.3s;
    cursor: pointer;
    &:hover {
      color: #409eff;
    }
  }
}
.edit-panle {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  min-width: 250px;
}
.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  // max-height: fit-content;
  background-color: rgb(255, 255, 255);
}
.header-actions {
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 10px;

  .refresh {
    cursor: pointer;
    margin-left: 20px;
  }
  .search-panle {
    margin-left: 10px;
  }
}
.icon {
  margin-right: 5px;
}
.tips {
  margin-left: 1rem;
  a {
    color: #409eff;
  }
}
.custom-confirm-message {
  text-align: center;
  color: #409eff !important;
}
</style>